<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
  1. vue中常用的按键别名：
  删除 delete (捕获“删除”和“退格”键)
  退出 esc 
  空格 space
  换行 tab 
  上 up ……
  2.vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转换为kebab-case(短横线命名)
  3.系统修饰键（用法特殊）：ctrl alt shift meta 
  (1) 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件触发
  (2) 配合keydown使用：正常触发事件
  4.也可以用keyCode去指定具体的按键（不推荐）
  5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
 -->
  <div id="root">
    <h1>你好，{{name}}</h1>
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。、
   Vue.config.keyCodes.huiche=13//定义了一个别名按键
    new Vue({
      el: '#root',
      data: {
        name: '尚硅谷'
      },
      methods: {
        showInfo(e) {
          console.log(e.keyCode)
          console.log(e.target.value)
        }
      }
    })
  </script>
</body>

</html>